import { MenuList } from "../../router/page";
import { Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import "./style.css";
import  React, {useEffect, useState } from 'react'

const MyMenu = () => {
  const navigate = useNavigate();

  const location = useLocation();

  const [key, setKey] = useState('')

  useEffect(() => {
    setKey(location.pathname)
  }, [location.pathname])

  const items = MenuList.map((item) => {
    return {
      key: item.path,
      label: item.title,
    };
  });

  const changeNav = (val) => {
    navigate(val.key);
  };

  return (
    <div className="menu-box">
      <Menu
        selectedKeys={[key]}
        className="menu-list"
        items={items}
        onClick={changeNav}
      />
    </div>
  );
};

export default MyMenu;
